<template>
    <header class="tabs">
        <div class="tab-item" :class="{ active: activeTab === 'activity' }" @click="switchTab('activity')">
            活动公告<span class="unread-dot" v-show="hasUnreadActivityMessages"></span>
        </div>
        <div class="tab-item" :class="{ active: activeTab === 'order' }" @click="switchTab('order')">
            订单消息<span class="unread-dot" v-show="hasUnreadOrderMessages"></span>
        </div>
    </header>
</template>
<script setup lang="ts">
defineProps({
    hasUnreadActivityMessages: {
        type: Boolean,
        default: false
    },
    hasUnreadOrderMessages: {
        type: Boolean,
        default: false
    },
    activeTab: {
        type: String,
        default: 'activity'
    }
})
const emit = defineEmits(['switchTab'])
const switchTab = (tab: string) => {
    emit('switchTab', tab)
}
</script>
<style scoped lang="scss">
$primary-color: #1abc9c;
.tabs {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 10px 15px 0;
    gap: 20px;
}

.tab-item {
    padding: 10px 5px;
    font-size: 17px;
    color: #666;
    position: relative;
    cursor: pointer;

    &.active {
        font-size: 21px;
        color: #333;
        font-weight: 600;

        &::after {
            content: '';
            width: 30%;
            position: absolute;
            bottom: -2px;
            left: 34%;

            height: 4px;
            background-color: $primary-color;
            border-radius: 2px;
        }
    }

    .unread-dot {
        position: absolute;
        top: 8px;
        right: -8px;
        width: 6px;
        height: 6px;
        background-color: #e74c3c;
        border-radius: 50%;
    }
}
</style>